import React, { PureComponent } from 'react';
import { Link, withRouter } from 'react-router-dom';
import  axios from 'axios';
import { Form, Icon, Input, Button, Checkbox, Radio,DatePicker } from 'antd';
import './zhuce.css'
const FormItem = Form.Item;
class NormalZhuceForm extends PureComponent {
    state = {
        confirmDirty: false,
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                axios({
                    url:"http://localhost:8080/user/insert",
                    method:'post',
                    data:values
                }).then((res)=>{
                        this.props.history.push('/login');
                })

            }
        });
    }
    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致');
        } else {
            callback();
        }
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['repassword'], { force: true });
        }
        callback();
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <div className='action' style={{marginTop:'100px'}}>
            <Form onSubmit={this.handleSubmit} className="login-form">
                <FormItem {...formItemLayout} label="用户名">
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: '请输入用户名' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="密码" >
                    {getFieldDecorator('password', {
                        rules: [{
                            required: true, message: '请输入密码'
                        }, {
                            validator: this.validateToNextPassword,
                        }],

                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                    )}
                </FormItem>
                <FormItem {...formItemLayout} label="确认密码">
                    {getFieldDecorator('repassword', {
                        rules: [{
                            required: true, message: '请确认密码'
                        }, {
                            validator: this.compareToFirstPassword,
                        }],
                    })(
                        <Input onBlur={this.handleConfirmBlur} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="确认密码" />
                    )}
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        注册
                    </Button>
                    <Link to="./login">立刻登陆！</Link>
                </FormItem>

            </Form>
            </div>
        );
    }
}

const Zhuce = Form.create()(NormalZhuceForm);
export default withRouter(Zhuce);